1. ReactiveFormModule Import 하기
  • app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { NgModule }            from '@angular/core';
import { BrowserModule }       from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module

import { AppComponent }        from './app.component';
import { PrescriptionModal }   from '[path]'; // <-- #1 import component

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- #2 add to @NgModule imports
  ],
  declarations: [
    AppComponent,
    PrescriptionModal, // <-- #3 declare app component
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  template: `
  <h2>Hero Detail</h2>
  <h3><i>Just a FormControl</i></h3>
  <label>Name:
    <input [formControl]="name">
  </label>

  <h3><i>FormControl in a FormGroup</i></h3>
  <form [formGroup]="heroForm" novalidate>
    <div>
      <label>Name:
        <input formControlName="name">
      </label>
    </div>
  </form>

  <p>Form value: {{ heroForm.value | json }}</p>
  <p>Form status: {{ heroForm.status | json }}</p>
  `
})
export class PrescriptionModal {
  name = new FormControl();

  heroForm = new FormGroup({
    name: new FormControl()
  });
}

FormControl : 값이나 validity를 추적한다.

FormGroup : 값이나 validity 추적을위한 AbstractControl 인스턴스 그룹.

AbstractControl : FormControl, FormGroup, FormArray의 추상 클래스로, 프로퍼티나 common behaviors들을 제공한다.

  • FormControl

FormControl 초기화 : 초기값, validators, async validators 값이 인자로 들어간다.

1
2
3
4
5
6
7
form = new FormGroup({
  lowerCase: new FormControl('', Validators.required),
  upperCase: new FormControl('',
               Validators.compose([
                 Validators.required,
                 Validators.pattern("[A-Z]{3}")]))
});

템플릿에 [formControl]="폼컨트롤이름"으로 적용한다.

  • FormGroup

FormGroup 초기화 : 폼 그룹 안에 폼컨트롤러를 선언해준다.

, form에 [formGroup]="폼그룹이름"으로 적용, input이나 select 태그에 formControlName="폼컨트롤이름" 과 같이 적용한다.

  • novalidators

<form> 태그 안에 novalidators는 브라우저가 원시 HTML 검증을 하지 않도록 해준다.